<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }">
    <template #navbar>
      <cu-navbar :navPlaceholder="true">
        <!-- #ifdef APP-PLUS -->
        <template #right> <cu-env-config /> </template>
        <!--  #endif -->
      </cu-navbar>
    </template>
    <view :class="[`${prefixCls}-setting-container`]">
      <view class="setting-row" v-for="(item, index) in userList" :key="index" @click="handleJump(item)">
        <view class="left"> {{ item.name }} </view>
        <view class="right">{{ item.value }} <uv-icon name="arrow-right"></uv-icon> </view>
      </view>
      <uv-divider></uv-divider>
      <view class="setting-row" v-for="(item, index) in accountList" :key="index" @click="handleJump(item)">
        <view class="left"> {{ item.name }} </view>
        <view class="right">{{ item.value }} <uv-icon name="arrow-right"></uv-icon> </view>
      </view>
      <view v-if="isLogin" class="setting-row" @click="handleLoginout()">
        <view class="center"> 退出登录 </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { TOKEN_KEY } from '@/common/enums/cacheEnum'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'setting',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      whiteList: ['cityConfig', 'dialogIsAgree', TOKEN_KEY],
      userList: [
        {
          name: '个人资料',
          path: '/pages/user/information',
          value: '',
        },
        {
          name: '隐私管理',
          path: '/pages/subpackage/privacy-policy/list',
          value: '',
        },
      ],
      accountList: [
        {
          name: '账号绑定管理',
          path: '/pages/subpackage/privacy-policy/account',
          value: '',
        },
        {
          name: '清除缓存',
          type: 'Cache',
          path: '',
          value: '',
        },
        {
          name: '个人信息与权限',
          path: '/pages/subpackage/setting/system-info',
          value: '',
        },
        // {
        //   name: '个人信息收集清单',
        //   path: '',
        //   value: '',
        // },
        // {
        //   name: '第三方信息共享清单',
        //   path: '',
        //   value: '',
        // },
        {
          name: '关于我们',
          path: '/pages/others/about',
          value: '',
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getCacheSize()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('user', ['Logout']),
    handleJump({ path, type }) {
      if (path) {
        this.$ROUTE.go(path)
        return
      }
      if (type && type == 'Cache') {
        const { GlobAppShortName } = Env
        uni.showModal({
          content: '是否清除本地缓存?',
          success: (res) => {
            if (res.confirm) {
              uni.getStorageInfo({
                success: (data) => {
                  let keys = data.keys // 获取所有的键名数组
                  const whiteList = this.whiteList.map((v) => {
                    return GlobAppShortName + '-' + v
                  })
                  console.log('whiteList', whiteList)
                  console.log('keys', keys)
                  keys.forEach((v) => {
                    if (!whiteList.includes(v)) {
                      uni.removeStorage({
                        key: v,
                      })
                    }
                  })
                  this.getCacheSize()
                },
              })
            }
          },
        })
      }
    },
    getCacheSize() {
      uni.getStorageInfo({
        success: (res) => {
          let currentSize = res.currentSize // 当前存储的数据大小，单位为 KB
          // 转换为 MB 或 GB
          let currentSizeMB = (currentSize / 1024).toFixed(2) // 转换为 MB，保留两位小数
          this.accountList[1].value = currentSizeMB + 'MB'
        },
      })
    },
    handleLoginout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出当前的登录状态吗？',
        success: (res) => {
          if (res.confirm) {
            this.Logout()
            this.$ROUTE.go('/pages/main/home')
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('setting-container')} {
  position: relative;
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .setting-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    .right {
      display: flex;
    }
    .center {
      font-size: 16px;
      padding: 8px;
      flex: 1;
      text-align: center;
      color: $uv-primary;
    }
  }
}
</style>
